<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="开发前视屏 # 6.0介绍视屏 4.0操作视屏教程 5.0变更操作视屏教程 开发系列合集,关注作者持续更新 由于版本的变更, 一些图标可能会有一些变化, 但位置无太大的变化
安装Python环境 # 环境准备: 官方 最新Python下载链接,可以到 淘宝镜象下载,也可以下载 WINDOWS64位安装版, MAC电脑安装版 Window平台安装视屏介绍,注意: Windows安装Python时需选中&quot;Add to Path&quot; Linux安装可参考文档下方的部署说明, Linux安装说明 安装SmartChart # 在Shell或CMD命令行执行
pip3 install smartchart #如果安装过程下载缓慢,建意使用镜象安装 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple smartchart -U #升级方法: pip3 install smartchart -U 启动smartchart # #本地测试启动: smartchart #服务器部署启动方式: smartchart runserver 0.0.0.0:8000 --insecure --noreload #如出现套接字，端口被占用， 可修改端口号启动， 如 smartchart runserver 0.0.0.0:8001 --insecure --noreload 一般本地启动后访问： http://127.0.0.1:8000 管理员帐号:admin 密码:admin #如果忘记密码, 可以使用此命令重置 smartchart changepassword 用户名 查看demo # 尝试熟悉编辑菜单, 界面等 开发功能项并非全部展示在界面, 请基于文档探索 尝试点开数据集查看写法, 图形编辑器，容器等 左则的菜单为动态项目名, 随着您的报表增长自动变化">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="快速开始" />
<meta property="og:description" content="开发前视屏 # 6.0介绍视屏 4.0操作视屏教程 5.0变更操作视屏教程 开发系列合集,关注作者持续更新 由于版本的变更, 一些图标可能会有一些变化, 但位置无太大的变化
安装Python环境 # 环境准备: 官方 最新Python下载链接,可以到 淘宝镜象下载,也可以下载 WINDOWS64位安装版, MAC电脑安装版 Window平台安装视屏介绍,注意: Windows安装Python时需选中&quot;Add to Path&quot; Linux安装可参考文档下方的部署说明, Linux安装说明 安装SmartChart # 在Shell或CMD命令行执行
pip3 install smartchart #如果安装过程下载缓慢,建意使用镜象安装 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple smartchart -U #升级方法: pip3 install smartchart -U 启动smartchart # #本地测试启动: smartchart #服务器部署启动方式: smartchart runserver 0.0.0.0:8000 --insecure --noreload #如出现套接字，端口被占用， 可修改端口号启动， 如 smartchart runserver 0.0.0.0:8001 --insecure --noreload 一般本地启动后访问： http://127.0.0.1:8000 管理员帐号:admin 密码:admin #如果忘记密码, 可以使用此命令重置 smartchart changepassword 用户名 查看demo # 尝试熟悉编辑菜单, 界面等 开发功能项并非全部展示在界面, 请基于文档探索 尝试点开数据集查看写法, 图形编辑器，容器等 左则的菜单为动态项目名, 随着您的报表增长自动变化" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://help.smartchart.cn/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" /><meta property="article:section" content="docs" />



<title>快速开始 | Smartchart开发手册</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css" integrity="sha256-xYKS02sYtnVoCrm66iApIEU3uDnqcvJYdG7A8yzo1sg=" crossorigin="anonymous">
  <script defer src="/flexsearch.min.js"></script>
  <script defer src="/en.search.min.ab069dde5ce91bbd3af2c528f16e7644e729ffde98f61e525463d6d716451ac7.js" integrity="sha256-qwad3lzpG7068sUo8W52ROcp/96Y9h5SVGPW1xZFGsc=" crossorigin="anonymous"></script>

  <script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2&#43;Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC&#43;NdcPIvZhzk=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
  
</head>
<body dir="ltr">
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <main class="container flex">
    <aside class="book-menu">
      <div class="book-menu-content">
        
  <nav>
<h2 class="book-brand">
  <a class="flex align-center" href="/"><span>Smartchart开发手册</span>
  </a>
</h2>


<div class="book-search">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>












  



  
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/" class="">关于我们</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5/" class="">设计理念</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-c354321856ed6feb84c1b4323285de46" class="toggle" checked />
    <label for="section-c354321856ed6feb84c1b4323285de46" class="flex justify-between">
      <a role="button" class="">1.基础操作</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%93%E4%B8%9A%E7%89%88%E8%AF%B4%E6%98%8E/" class="">专业版本说明</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="active">快速开始</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">第一个仪表盘</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%8D%E6%9D%82%E6%8A%A5%E8%A1%A8/" class="">第一个复杂报表</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA3D%E5%9C%BA%E6%99%AF/" class="">第一个3D场景</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AAAI%E5%9C%BA%E6%99%AF/" class="">第一个AI场景</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%B8%8A%E7%BA%BF%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">第一个上线数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%A7%E5%B1%8F%E6%A8%A1%E6%9D%BF%E8%BD%AC%E5%8C%96/" class="">第一个大屏模板转化</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%88%9B%E5%BB%BA%E8%BF%9E%E6%8E%A5%E6%B1%A0/" class="">创建连接池</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF/" class="">应用模板</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86/" class="">权限管理</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-ebbdf386fef5a4b61debc89d61d0dadf" class="toggle"  />
    <label for="section-ebbdf386fef5a4b61debc89d61d0dadf" class="flex justify-between">
      <a role="button" class="">Vue相关</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/" class="">使用 Vue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ElementUI/" class="">Element Ui</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/" class="">Data V应用</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-5bb75c87734dfbe4db2b79fa99d34f85" class="toggle"  />
    <label for="section-5bb75c87734dfbe4db2b79fa99d34f85" class="flex justify-between">
      <a role="button" class="">不太重要</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E4%B8%BB%E9%A2%98%E5%BA%94%E7%94%A8PRO/" class="">主题应用 Pro</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E5%A4%8D%E5%88%B6%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">复制仪表盘</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-54fee82a365f217fe67a17292f7959e5" class="toggle"  />
    <label for="section-54fee82a365f217fe67a17292f7959e5" class="flex justify-between">
      <a role="button" class="">2.数据集说明</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">数据集开发界面</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/SQL%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Sql数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%95%B0%E6%8D%AE%E5%88%B7%E6%96%B0/" class="">数据集数据刷新</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-17dce050c02e560c36fb8bcb52fc8432" class="toggle"  />
    <label for="section-17dce050c02e560c36fb8bcb52fc8432" class="flex justify-between">
      <a role="button" class="">特殊数据源</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/API%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Api数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E4%BD%BF%E7%94%A8EXCEL%E6%95%B0%E6%8D%AE/" class="">使用 Excel数据</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Python%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Python数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">自定义数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/webSocket%E6%96%B9%E5%BC%8F/" class="">Web Socket方式</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Elasticsearch%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Elasticsearch数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/JDBC%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Jdbc数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/kafka%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Kafka数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/mongodb%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Mongodb数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/promitheus%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Promitheus数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Redis%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Redis数据源</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/sqlalchemy%E8%BF%9E%E6%8E%A5/" class="">Sqlalchemy连接</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E9%82%AE%E4%BB%B6%E5%8F%91%E9%80%81%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">邮件发送数据源</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-b696a5333fb0b6aa0ada2335e5fe864c" class="toggle"  />
    <label for="section-b696a5333fb0b6aa0ada2335e5fe864c" class="flex justify-between">
      <a role="button" class="">数据集形态</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E5%85%B1%E4%BA%AB%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">共享数据集</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%87%92%E5%8A%A0%E8%BD%BD/" class="">数据集懒加载</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-c5a4ac1635ece2dfef28e23678ea9e21" class="toggle"  />
    <label for="section-c5a4ac1635ece2dfef28e23678ea9e21" class="flex justify-between">
      <a role="button" class="">3.图形开发</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%9F%BA%E7%A1%80%E5%9B%BE%E5%BD%A2/" class="">基础图形</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%AE%A1%E7%90%86%E5%9B%BE%E5%BD%A2/" class="">管理图形</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/Echarts%E7%BB%84%E4%BB%B6/" class="">Echarts组件</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/HTML%E7%BB%84%E4%BB%B6/" class="">Html组件</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E8%B0%83%E8%AF%95%E6%97%A5%E5%BF%97/" class="">调试日志</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-8b7ef748294c9611ad2ef758768793c4" class="toggle"  />
    <label for="section-8b7ef748294c9611ad2ef758768793c4" class="flex justify-between">
      <a role="button" class="">函数方法</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/%E5%9B%BE%E5%BD%A2%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%87%BD%E6%95%B0/" class="">图形端数据函数</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/Jquery%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" class="">Jquery遍历方法</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-4e8eda9dcb8eb0bfa033731d4401df15" class="toggle"  />
    <label for="section-4e8eda9dcb8eb0bfa033731d4401df15" class="flex justify-between">
      <a role="button" class="">特殊图形</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/LineUp%E5%9B%BE%E5%BD%A2/" class="">Line Up图形</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E4%BD%BF%E7%94%A8%E5%9B%BE%E6%A0%87/" class="">使用图标</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8/" class="">无缝滚动</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2%E5%8A%A0%E8%BD%BD/" class="">特殊图形加载</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-30aee618b2f055fbebe03b9acabc9330" class="toggle"  />
    <label for="section-30aee618b2f055fbebe03b9acabc9330" class="flex justify-between">
      <a role="button" class="">Element Ui组件</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/ElementUI%E7%BB%84%E4%BB%B6/%E5%B8%A6%E5%88%86%E9%A1%B5%E7%9A%84%E8%A1%A8%E6%A0%BC/" class="">带分页的表格</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-478b5d3161d3129d62529b01d6fb834c" class="toggle"  />
    <label for="section-478b5d3161d3129d62529b01d6fb834c" class="flex justify-between">
      <a role="button" class="">4.布局说明</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%B8%83%E5%B1%80%E6%8C%87%E5%BC%95/" class="">布局指引</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%8B%96%E6%8B%BD%E8%87%AA%E5%8A%A8%E5%AF%B9%E9%BD%90/" class="">拖拽自动对齐</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%88%A0%E9%99%A4%E5%AE%B9%E5%99%A8/" class="">删除容器</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-86bbf1d771d855758065f951675b7ee7" class="toggle"  />
    <label for="section-86bbf1d771d855758065f951675b7ee7" class="flex justify-between">
      <a role="button" class="">5.参数及联动钻取</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%8F%82%E6%95%B0%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95/" class="">参数编写方法</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/" class="">图形联动钻取</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%AD%9B%E9%80%89%E5%99%A8%E6%8C%87%E5%8D%97/" class="">筛选器指南</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E8%81%94%E5%8A%A8/" class="">组件自定义联动</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-1a4301e6dac08bd3bdb48c3500ec971d" class="toggle"  />
    <label for="section-1a4301e6dac08bd3bdb48c3500ec971d" class="flex justify-between">
      <a role="button" class="">6.进阶开发 Pro</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="toggle"  />
    <label for="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="flex justify-between">
      <a role="button" class="">低代码开发</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">模板开发界面</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/" class="">快捷开发</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/" class="">上传资源文件</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0/" class="">边框与装饰</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" class="">样式快速上手</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/" class="">ID E开发模式</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/" class="">动画效果</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="">编辑器快捷键</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-2b5b070b11b526d911f2143b53347842" class="toggle"  />
    <label for="section-2b5b070b11b526d911f2143b53347842" class="flex justify-between">
      <a role="button" class="">数据服务</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1%E8%AE%BE%E5%AE%9A/" class="">数据服务设定</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API/" class="">数据服务 API</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD/" class="">数据下载</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E5%A1%AB%E6%8A%A5/" class="">数据填报</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0/" class="">后台 Api刷新</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%A4%87%E4%BB%BD%E6%81%A2%E5%A4%8D%E5%8F%8A%E7%89%88%E6%9C%AC/" class="">备份恢复及版本</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/" class="">自定义首页</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E9%9B%86%E6%88%90AI%E7%94%9F%E6%88%90/" class="">集成 Ai生成</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-bfe0709421fcc9cc6742d70724a0841d" class="toggle"  />
    <label for="section-bfe0709421fcc9cc6742d70724a0841d" class="flex justify-between">
      <a role="button" class="">7.报表嵌入</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E7%AE%80%E5%8D%95%E5%B5%8C%E5%85%A5/" class="">简单嵌入</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/" class="">单点登录</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%B5%8C%E5%85%A5/" class="">单页面嵌入</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-50ddcd837bca405840b973f89ee4c795" class="toggle"  />
    <label for="section-50ddcd837bca405840b973f89ee4c795" class="flex justify-between">
      <a role="button" class="">8. Django应用</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/8.Django%E5%BA%94%E7%94%A8/%E5%B5%8C%E5%85%A5Django-Apps/" class="">嵌入 Django Apps</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/8.Django%E5%BA%94%E7%94%A8/FAQ/" class="">Faq</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="toggle"  />
    <label for="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="flex justify-between">
      <a role="button" class="">9. Jupyter应用</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/9.Jupyter%E5%BA%94%E7%94%A8/Jupyter%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95/" class="">Jupyter中使用指引</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="toggle"  />
    <label for="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="flex justify-between">
      <a role="button" class="">10.其它</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/10.%E5%85%B6%E5%AE%83/FAQ/" class="">Faq</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/10.%E5%85%B6%E5%AE%83/%E8%AF%95%E7%94%A8%E6%BF%80%E6%B4%BB%E8%AF%B4%E6%98%8E/" class="">试用激活说明</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-1221ac066d992a43b363728eac9711d8" class="toggle"  />
    <label for="section-1221ac066d992a43b363728eac9711d8" class="flex justify-between">
      <a role="button" class="">11.部署指南</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-df28c15db9b442124658f06e614fc60b" class="toggle"  />
    <label for="section-df28c15db9b442124658f06e614fc60b" class="flex justify-between">
      <a role="button" class="">Linux</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/SQLite3%E7%89%88%E6%9C%AC%E9%94%99%E8%AF%AF/" class="">Sqlite3版本错误</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E7%94%9F%E4%BA%A7%E9%83%A8%E7%BD%B2/" class="">生产部署</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-1c911073b1023b05de57d665aa6300d6" class="toggle"  />
    <label for="section-1c911073b1023b05de57d665aa6300d6" class="flex justify-between">
      <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Windows/" class="">Windows</a>
    </label>
  

          
  <ul>
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>











  
<ul>
  
  <li>
    <a href="https://www.smartchart.cn/"  target="_blank" rel="noopener">
        官网
      </a>
  </li>
  
  <li>
    <a href="https://gitee.com/smartchart/smartchart"  target="_blank" rel="noopener">
        Gitee
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>


 
      </div>
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <strong>快速开始</strong>

  <label for="toc-control">
    
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
    
  </label>
</div>


  
  <aside class="hidden clearfix">
    
  
<nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li><a href="#开发前视屏">开发前视屏</a></li>
            <li><a href="#安装python环境">安装Python环境</a></li>
            <li><a href="#安装smartchart">安装SmartChart</a></li>
            <li><a href="#启动smartchart">启动smartchart</a></li>
            <li><a href="#查看demo">查看demo</a></li>
            <li><a href="#仪表盘菜单">仪表盘菜单</a></li>
            <li><a href="#仪表盘容器菜单">仪表盘容器菜单</a></li>
            <li><a href="#高级设定">高级设定</a></li>
            <li><a href="#数据集开发">数据集开发</a></li>
            <li><a href="#图形开发">图形开发</a></li>
            <li><a href="#模板开发">模板开发</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>



  </aside>
  
 
      </header>

      
      
  <article class="markdown"><h3 id="开发前视屏">
  开发前视屏
  <a class="anchor" href="#%e5%bc%80%e5%8f%91%e5%89%8d%e8%a7%86%e5%b1%8f">#</a>
</h3>
<ul>
<li>
  <a href="https://www.bilibili.com/video/BV1Md4y1h7iq">6.0介绍视屏</a></li>
<li>
  <a href="https://www.bilibili.com/video/BV14u411S7L8/">4.0操作视屏教程</a></li>
<li>
  <a href="https://www.bilibili.com/video/BV1fm4y1Q7DG/">5.0变更操作视屏教程</a></li>
<li>
  <a href="https://space.bilibili.com/604568670/channel/series/">开发系列合集,关注作者持续更新</a></li>
</ul>
<p><strong>由于版本的变更, 一些图标可能会有一些变化, 但位置无太大的变化</strong></p>
<h3 id="安装python环境">
  安装Python环境
  <a class="anchor" href="#%e5%ae%89%e8%a3%85python%e7%8e%af%e5%a2%83">#</a>
</h3>
<ul>
<li>环境准备: 官方
  <a href="https://www.python.org/downloads/release/python-390/" title="最新Python下载链接">最新Python下载链接</a>,可以到
  <a href="https://npm.taobao.org/mirrors/python/3.9.0/" title="淘宝镜象下载">淘宝镜象下载</a>,也可以下载
  <a href="https://npm.taobao.org/mirrors/python/3.9.0/python-3.9.0-amd64.exe" title="WINDOWS64位安装版">WINDOWS64位安装版</a>,
  <a href="http://npm.taobao.org/mirrors/python/3.9.0/python-3.9.0rc2-macosx10.9.pkg" title="MAC电脑安装版">MAC电脑安装版</a></li>
<li>
  <a href="https://www.ixigua.com/6910413586208653837?id=6901867671193649668" title="Window平台安装视屏介绍">Window平台安装视屏介绍</a>,<strong>注意: Windows安装Python时需选中&quot;Add to Path&quot;</strong></li>
<li>Linux安装可参考文档下方的部署说明, 
  <a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/">Linux安装说明</a></li>
</ul>
<h3 id="安装smartchart">
  安装SmartChart
  <a class="anchor" href="#%e5%ae%89%e8%a3%85smartchart">#</a>
</h3>
<p>在Shell或CMD命令行执行</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span>pip3 install smartchart
</span></span><span style="display:flex;"><span><span style="color:#75715e">#如果安装过程下载缓慢,建意使用镜象安装</span>
</span></span><span style="display:flex;"><span>pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple smartchart -U
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">#升级方法:</span>
</span></span><span style="display:flex;"><span>pip3 install smartchart -U
</span></span></code></pre></div><h3 id="启动smartchart">
  启动smartchart
  <a class="anchor" href="#%e5%90%af%e5%8a%a8smartchart">#</a>
</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span><span style="color:#75715e">#本地测试启动: </span>
</span></span><span style="display:flex;"><span>smartchart
</span></span><span style="display:flex;"><span><span style="color:#75715e">#服务器部署启动方式: </span>
</span></span><span style="display:flex;"><span>smartchart runserver 0.0.0.0:8000 --insecure --noreload
</span></span><span style="display:flex;"><span><span style="color:#75715e">#如出现套接字，端口被占用， 可修改端口号启动， 如</span>
</span></span><span style="display:flex;"><span>smartchart runserver 0.0.0.0:8001 --insecure --noreload
</span></span></code></pre></div><ul>
<li>一般本地启动后访问： http://127.0.0.1:8000</li>
<li>管理员帐号:admin 密码:admin</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-shell" data-lang="shell"><span style="display:flex;"><span><span style="color:#75715e">#如果忘记密码, 可以使用此命令重置</span>
</span></span><span style="display:flex;"><span>smartchart changepassword 用户名
</span></span></code></pre></div><h3 id="查看demo">
  查看demo
  <a class="anchor" href="#%e6%9f%a5%e7%9c%8bdemo">#</a>
</h3>
<ul>
<li>尝试熟悉编辑菜单, 界面等</li>
<li>开发功能项并非全部展示在界面, 请基于文档探索</li>
<li>尝试点开数据集查看写法, 图形编辑器，容器等</li>
</ul>
<p>
  <img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669429149732684761/f50ac02d_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<blockquote>
<p>左则的菜单为动态项目名, 随着您的报表增长自动变化</p>
</blockquote>
<h3 id="仪表盘菜单">
  仪表盘菜单
  <a class="anchor" href="#%e4%bb%aa%e8%a1%a8%e7%9b%98%e8%8f%9c%e5%8d%95">#</a>
</h3>
<p>
  <img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669429581637571359/b4dbbdc3_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<table>
<thead>
<tr>
<th style="text-align:left">功能项</th>
<th style="text-align:center">子项</th>
<th style="text-align:center">使用说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">菜单栏</td>
<td style="text-align:center">-</td>
<td style="text-align:center">点击可展开隐藏, 可移动位置</td>
</tr>
<tr>
<td style="text-align:left">设定</td>
<td style="text-align:center">常规设定</td>
<td style="text-align:center">权限管理,水印,模板应用,版本控制..</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">高级设定</td>
<td style="text-align:center">开启模板/移动端适应/VUE/DATAV/场景背景..</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">批量布局</td>
<td style="text-align:center">批量修改容器的HTML, 不常用</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">容器管理</td>
<td style="text-align:center">批量查看/管理/删除容器, 不常用</td>
</tr>
<tr>
<td style="text-align:left">模板</td>
<td style="text-align:center">-</td>
<td style="text-align:center">进入低代码开发,引入JS/CSS,上传,组件&hellip;</td>
</tr>
<tr>
<td style="text-align:left">新增</td>
<td style="text-align:center">拖拽图形</td>
<td style="text-align:center">新增一个带拖拽容器的图形组件</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">栅格图形</td>
<td style="text-align:center">新增一个带栅格容器的图形组件</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">上线数据集</td>
<td style="text-align:center">新增一个已开发好的数据集(需要是上线状态)</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">懒加载数据集</td>
<td style="text-align:center">新增后在菜单栏可查看编辑,此数据集需自定义触发查询,默认可引用全局变量名为data序号, 如data0</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">通用数据集</td>
<td style="text-align:center">新增后在菜单栏可查看编辑,主动触发查询,全局变量名为data序号, 如data0</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">静态组件</td>
<td style="text-align:center">新增一个不带数据集及图形的html组件, 如图片,文字描述&hellip;</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">复杂报表</td>
<td style="text-align:center">使用类excel的方式开发报表</td>
</tr>
<tr>
<td style="text-align:left">拖拽开关</td>
<td style="text-align:center">-</td>
<td style="text-align:center">切换拖拽锁定, 如需编辑EXCEL图形组件, 一般需要锁定</td>
</tr>
<tr>
<td style="text-align:left">弹窗开关</td>
<td style="text-align:center">-</td>
<td style="text-align:center">切换编辑器是嵌入方式还是新开页面</td>
</tr>
<tr>
<td style="text-align:left">自定义主题</td>
<td style="text-align:center">-</td>
<td style="text-align:center">修改echarts的主题, 仅当前仪表盘有效</td>
</tr>
<tr>
<td style="text-align:left">调试开关</td>
<td style="text-align:center">-</td>
<td style="text-align:center">切换是否显示调试打印的日志,开启网格辅助定位及精确拖拽定位</td>
</tr>
<tr>
<td style="text-align:left">主题选择</td>
<td style="text-align:center">-</td>
<td style="text-align:center">切换显示内置echarts主题</td>
</tr>
<tr>
<td style="text-align:left">预览</td>
<td style="text-align:center">-</td>
<td style="text-align:center">切换开发模式下的预览模式</td>
</tr>
<tr>
<td style="text-align:left">数据集</td>
<td style="text-align:center">-</td>
<td style="text-align:center">菜单栏会显示未激活/通用/懒加载数据集</td>
</tr>
</tbody>
</table>
<h3 id="仪表盘容器菜单">
  仪表盘容器菜单
  <a class="anchor" href="#%e4%bb%aa%e8%a1%a8%e7%9b%98%e5%ae%b9%e5%99%a8%e8%8f%9c%e5%8d%95">#</a>
</h3>
<table>
<thead>
<tr>
<th style="text-align:left">功能项</th>
<th style="text-align:center">子项</th>
<th style="text-align:center">使用说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">序号</td>
<td style="text-align:center">-</td>
<td style="text-align:center">唯一标识容器ID,可以通过 #container_序号 来选择容器, 如样式选择:#container_0{}, JS选择:$(&rsquo;#container_0&rsquo;).xx</td>
</tr>
<tr>
<td style="text-align:left">数据集开发</td>
<td style="text-align:center">-</td>
<td style="text-align:center">打开数据集开发界面, 可切换数据源,数据定时刷新,数据开发&hellip;</td>
</tr>
<tr>
<td style="text-align:left">图形开发</td>
<td style="text-align:center">-</td>
<td style="text-align:center">打开图形开发界面, 可进行实时图形配置调试, 切换内置图形, 自定义图形, 图形商店&hellip;</td>
</tr>
<tr>
<td style="text-align:left">容器开发</td>
<td style="text-align:center">-</td>
<td style="text-align:center">打开容器开发界面, 进行栅格布局调整, 拖拽方式不常用&hellip;</td>
</tr>
<tr>
<td style="text-align:left">隐藏容器</td>
<td style="text-align:center">-</td>
<td style="text-align:center">将容器切换为未激活状态,如果永久删除&hellip;</td>
</tr>
</tbody>
</table>
<h3 id="高级设定">
  高级设定
  <a class="anchor" href="#%e9%ab%98%e7%ba%a7%e8%ae%be%e5%ae%9a">#</a>
</h3>
<p>
  <img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669429859879258940/b161798a_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<table>
<thead>
<tr>
<th style="text-align:left">功能项</th>
<th style="text-align:center">子项</th>
<th style="text-align:center">使用说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">模板开关</td>
<td style="text-align:center">-</td>
<td style="text-align:center">开启模板开发, 新增拖拽图形后会自动开启</td>
</tr>
<tr>
<td style="text-align:left">移动适配开关</td>
<td style="text-align:center">-</td>
<td style="text-align:center">不固定宽高比例模式, 如果非大屏建意开启</td>
</tr>
<tr>
<td style="text-align:left">VUE</td>
<td style="text-align:center">-</td>
<td style="text-align:center">开启后可以使用VUE模式开发</td>
</tr>
<tr>
<td style="text-align:left">DATAV</td>
<td style="text-align:center">-</td>
<td style="text-align:center">开启后可以使用DATAV的组件及VUE</td>
</tr>
<tr>
<td style="text-align:left">极简菜单</td>
<td style="text-align:center">-</td>
<td style="text-align:center">开启后隐藏仪表盘中不常用工具图标</td>
</tr>
<tr>
<td style="text-align:left">数据集模式</td>
<td style="text-align:center">-</td>
<td style="text-align:center">开启后仅用于查看和管理数据集</td>
</tr>
<tr>
<td style="text-align:left">背景模板</td>
<td style="text-align:center">-</td>
<td style="text-align:center">可选择预设的大屏背景</td>
</tr>
</tbody>
</table>
<h3 id="数据集开发">
  数据集开发
  <a class="anchor" href="#%e6%95%b0%e6%8d%ae%e9%9b%86%e5%bc%80%e5%8f%91">#</a>
</h3>
<p>
  <img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669430117687266991/eba6a36a_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<table>
<thead>
<tr>
<th style="text-align:left">功能项</th>
<th style="text-align:center">子项</th>
<th style="text-align:center">使用说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">标题</td>
<td style="text-align:center">修改名称</td>
<td style="text-align:center">修改数据集名称</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">联动设定</td>
<td style="text-align:center">图形联动相关的配置</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">权限设定</td>
<td style="text-align:center">数据集权限管理</td>
</tr>
<tr>
<td style="text-align:left">数据源</td>
<td style="text-align:center">-</td>
<td style="text-align:center">点击显示默认数据库的表清单</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">切换数据源</td>
<td style="text-align:center">切换数据源</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">编辑数据源</td>
<td style="text-align:center">编辑当前数据源配置</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">新增数据源</td>
<td style="text-align:center">新增数据源</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">刷新设定</td>
<td style="text-align:center">设定数据集的后台缓存及前端刷新间隔时间</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">数据库清单</td>
<td style="text-align:center">获取当前数据源所有的数据库清单</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">表清单</td>
<td style="text-align:center">不选择数据库时, 获取默认数据库表清单, 选中数据库名称,可获取选中数据库表清单</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">表结构</td>
<td style="text-align:center">选中表名,可获取表的字段描述</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">建表语句</td>
<td style="text-align:center">选中表名,可获取表的建表语句</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">表样列</td>
<td style="text-align:center">选中表名,可获取表的样列数据</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">表条数</td>
<td style="text-align:center">选中表名,可获取表的总条数, 也可选中一段查询获取总条数</td>
</tr>
<tr>
<td style="text-align:left">工具</td>
<td style="text-align:center">代码折叠</td>
<td style="text-align:center">折叠选中的代码</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">代码展开</td>
<td style="text-align:center">展开选中的代码</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">代码格式化</td>
<td style="text-align:center">格式化选中的代码</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">获取执行脚本</td>
<td style="text-align:center">一般用于参数调试时获取实际脚本</td>
</tr>
<tr>
<td style="text-align:left">GPT</td>
<td style="text-align:center">-</td>
<td style="text-align:center">进行AI问答式开发</td>
</tr>
<tr>
<td style="text-align:left">执行</td>
<td style="text-align:center">-</td>
<td style="text-align:center">执行预览数据集,或选中一段脚本执行</td>
</tr>
<tr>
<td style="text-align:left">保存数据集</td>
<td style="text-align:center">-</td>
<td style="text-align:center">保存并刷新数据集后台缓存</td>
</tr>
<tr>
<td style="text-align:left">编辑器设定</td>
<td style="text-align:center">-</td>
<td style="text-align:center">设定编辑器的主题等</td>
</tr>
</tbody>
</table>
<h3 id="图形开发">
  图形开发
  <a class="anchor" href="#%e5%9b%be%e5%bd%a2%e5%bc%80%e5%8f%91">#</a>
</h3>
<p>
  <img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669430349247348908/16b9f410_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<table>
<thead>
<tr>
<th style="text-align:left">功能项</th>
<th style="text-align:center">子项</th>
<th style="text-align:center">使用说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">实时调试</td>
<td style="text-align:center">-</td>
<td style="text-align:center">默认开启, 修改配置后, 实时显示图形, 当大量数据处理时, 建意关闭</td>
</tr>
<tr>
<td style="text-align:left">调色板</td>
<td style="text-align:center">-</td>
<td style="text-align:center">可进行颜色选择, 需复制颜色代码到配置项</td>
</tr>
<tr>
<td style="text-align:left">图形</td>
<td style="text-align:center">基础图形</td>
<td style="text-align:center">系统内置基础图形, 如柱/线/点/饼/中国式报表&hellip;, 可通过配制衍生出各种图形..</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">个人图形</td>
<td style="text-align:center">可以保存个人修改或转化过的图形进行复用</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">图形商店</td>
<td style="text-align:center">参考smartchart官方样列图形, 复制粘贴即可使用</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">Echarts社区</td>
<td style="text-align:center">参考echarts官方样列图形, 复制粘贴后转化即可使用</td>
</tr>
<tr>
<td style="text-align:left">参考</td>
<td style="text-align:center">-</td>
<td style="text-align:center">常用的echarts配置项菜单, 复制粘贴即可使用</td>
</tr>
<tr>
<td style="text-align:left">工具</td>
<td style="text-align:center">转化</td>
<td style="text-align:center">将echarts原生图形转化为smartchart</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">代码</td>
<td style="text-align:center">代码折叠/展开等</td>
</tr>
</tbody>
</table>
<h3 id="模板开发">
  模板开发
  <a class="anchor" href="#%e6%a8%a1%e6%9d%bf%e5%bc%80%e5%8f%91">#</a>
</h3>
<table>
<thead>
<tr>
<th style="text-align:left">功能项</th>
<th style="text-align:center">子项</th>
<th style="text-align:center">使用说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">图形</td>
<td style="text-align:center">-</td>
<td style="text-align:center">适用于在将静态模板转化过程中或复杂布局场景使用, 常规建意采用在仪表盘界面中新增</td>
</tr>
<tr>
<td style="text-align:left">容器</td>
<td style="text-align:center">拖拽</td>
<td style="text-align:center">选中组件代码段, 将为组件加上拖拽容器代码</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">栅格</td>
<td style="text-align:center">选中组件代码段, 将为组件加上栅格容器代码</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">DATAV边框</td>
<td style="text-align:center">选中组件代码段, 将为组件加上DATAV边框容器代码</td>
</tr>
<tr>
<td style="text-align:left">编辑</td>
<td style="text-align:center">数据集</td>
<td style="text-align:center">选中带图形的代码段div_list.xx, 打开数据集编辑, 可用快捷键CTRL+Q</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">图形</td>
<td style="text-align:center">选中带图形的代码段, 打开图形编辑</td>
</tr>
<tr>
<td style="text-align:left"></td>
<td style="text-align:center">容器</td>
<td style="text-align:center">选中带图形的代码段, 打开容器编辑</td>
</tr>
<tr>
<td style="text-align:left">样式</td>
<td style="text-align:center">-</td>
<td style="text-align:center">常样html组件样式, 如背景颜色, 字体..</td>
</tr>
<tr>
<td style="text-align:left">组件</td>
<td style="text-align:center">-</td>
<td style="text-align:center">常用html组件, 如图片, 按钮, 轮播..</td>
</tr>
<tr>
<td style="text-align:left">UI组件</td>
<td style="text-align:center">-</td>
<td style="text-align:center">常用elementUI组件, 使用方法需参考文档</td>
</tr>
<tr>
<td style="text-align:left">3D模型</td>
<td style="text-align:center">-</td>
<td style="text-align:center">加载并使用3D模型场景</td>
</tr>
<tr>
<td style="text-align:left">资源</td>
<td style="text-align:center">-</td>
<td style="text-align:center">不太常用的资源, 如加载词云, 地图&hellip;</td>
</tr>
<tr>
<td style="text-align:left">工具</td>
<td style="text-align:center">-</td>
<td style="text-align:center">代码折叠,对齐转化,快照定存,文件上传,数据集批量授权..</td>
</tr>
<tr>
<td style="text-align:left">编辑器设定</td>
<td style="text-align:center">-</td>
<td style="text-align:center">设定编辑器的主题等</td>
</tr>
</tbody>
</table>
</article>
 
      

      <footer class="book-footer">
        
  <div class="flex flex-wrap justify-between">




  <div>
    <a class="flex align-center" href="https://gitee.com/smartchart/smartchartDoc/edit/master/content/docs/1.%e5%9f%ba%e7%a1%80%e6%93%8d%e4%bd%9c/%e5%bf%ab%e9%80%9f%e5%bc%80%e5%a7%8b.md" target="_blank" rel="noopener">
      <img src="/svg/edit.svg" class="book-icon" alt="Edit" />
      <span>Edit this page</span>
    </a>
  </div>


</div>



  <script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>


 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    
    <aside class="book-toc">
      <div class="book-toc-content">
        
  
<nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li><a href="#开发前视屏">开发前视屏</a></li>
            <li><a href="#安装python环境">安装Python环境</a></li>
            <li><a href="#安装smartchart">安装SmartChart</a></li>
            <li><a href="#启动smartchart">启动smartchart</a></li>
            <li><a href="#查看demo">查看demo</a></li>
            <li><a href="#仪表盘菜单">仪表盘菜单</a></li>
            <li><a href="#仪表盘容器菜单">仪表盘容器菜单</a></li>
            <li><a href="#高级设定">高级设定</a></li>
            <li><a href="#数据集开发">数据集开发</a></li>
            <li><a href="#图形开发">图形开发</a></li>
            <li><a href="#模板开发">模板开发</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>


 
      </div>
    </aside>
    
  </main>

  
</body>
</html>












